<script setup>
import { ref, onMounted } from 'vue'
// import { MdEditor, MdPreview } from 'md-editor-v3'
import { useRouter } from 'vue-router';
import { getArticleList, getCategoryAndLabelList, updateStatusApi, delArticleApi } from '@/api/article'
import { ElMessage, ElMessageBox } from 'element-plus';
const router = useRouter()
// 条件参数
const pageParams = ref({
  title: '',
  labelName: '',
  categoryName: '',
  dateArray: [],
  status: null
})
// loading效果
const isLoading = ref(false);

// 日期改变了
const dateChange = (event) => {
  if (event == null) {
    getArticle()
    return
  }
  // 将日期处理
  pageParams.value.dateArray.value = event
  getArticle()
}

// 标签数据
const labelList = ref([])
const categoryList = ref([])
const getCateAndLabel = async () => {
  const { data } = await getCategoryAndLabelList()
  categoryList.value = data.category
  labelList.value = data.label
}
// 获取
onMounted(() => {
  getCateAndLabel()
})

// 标签相关
const activeName = ref('0')
// 标签切换了
const handleClick = (event) => {
  if (event.props.name === '0') {
    pageParams.value.status = null
    getArticle()
    return
  }
  pageParams.value.status = parseInt(event.props.name, 10)
  getArticle()
}

// 表格区域
const tableData = ref([
])
// 获取所有的文章数据
const getArticle = async () => {
  isLoading.value = true
  // 获取所有的
  const res = await getArticleList(pageParams.value)
  // 处理id
  tableData.value = res.data
  isLoading.value = false
}
// 获取数据
onMounted(() => {
  getArticle()
})

// 失去焦点 模糊匹配
const onBlur = () => {
  getArticle()
}
// 改变了标签
const labelChange = () => {
  getArticle()
}
// 改变了分类
const categoryChange = () => {
  getArticle()
}

// 修改文章状态
const updateStatus = (id, type) => {
  let message = type ? '公开' : '隐藏'
  ElMessageBox.confirm("您确定要" + message + "该文章吗?", message + "文章", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
  }).then(async () => {
    if (type) {
      // 显示
      await updateStatusApi(id, 1)
    } else {
      // 隐藏
      await updateStatusApi(id, 2)
    }
    getArticle()
    ElMessage.success(message + '成功')
  })
}
// 删除文章
const onDelArticle = (id) => {
  ElMessageBox.confirm("您确定要删除该文章吗?", "删除文章", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: 'error'
  }).then(async () => {
    await delArticleApi(id)
    ElMessage.warning('删除成功')
    getArticle()
  })
}

// 修改文章
const update = (id) => {
  router.push(`/article/pigeonhole/md/${id}`)
}

</script>
<template>
  <div class="div">
    <!-- 卡片位置 -->
    <el-card class="label">
      <!-- 按钮的插槽 -->
      <template #header>
        <div class="card">
          <!-- 标题 -->
          <div class="card-header">
            <span style="color: #131f2b;font-weight: bold;">文章管理</span>
          </div>
          <!-- 按钮区域 -->
          <div class="card-rignt">
            <!-- 上传的按钮 -->
            <el-button type="primary" plain style="width: 100px;margin-left: 1100px;"
              @click="router.push(`/article/pigeonhole/md/0`)">
              <i class="iconfont icon-xinzeng" style="font-size: 14px;"></i>
              <span style="margin-right: 28px;">发布文章</span>
            </el-button>
          </div>
        </div>
      </template>
      <!-- 按钮区域 -->
      <el-row>
        <el-col :span="3">
          <el-form-item label="文章标题：" prop="" style="width: 268px;">
            <el-input placeholder="请输入文章标题" v-model="pageParams.title" @blur="onBlur"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5" style="margin-left: 120px;">
          <el-form-item label="文章标签：" prop="" style="width: 268px;">
            <el-select @change="labelChange" clearable v-model="pageParams.labelName" placeholder="请选择文章标签">
              <el-option v-for="item in labelList" :key="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5" style="margin-left: 20px;">
          <el-form-item label="文章分类：" prop="" style="width: 268px;">
            <el-select @change="categoryChange" @click="clearable" clearable v-model="pageParams.categoryName"
              placeholder="请选择文章分类">
              <el-option v-for="item in categoryList" :key="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5" style="margin-left: 20px;">
          <el-form-item label="发布时间：" prop="" style="width: 408px;">
            <el-date-picker @change="dateChange" v-model="pageParams.dateArray" type="daterange" range-separator="到"
              start-placeholder="发布时间" end-placeholder="结束时间" value-format="YYYY-MM-DD" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 标签页 -->
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="全部" name="0">
          <!-- 表格区域 -->
          <el-table v-loading="isLoading" height="476px" :data="tableData" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }">
            <el-table-column fixed label="序号" prop="id" width="70">
              <template #default="scope">
                <el-tooltip class="box-item" effect="dark" :content="scope.row.id" placement="top">
                  <p>{{ scope.row.id.toString().slice(-3) }}</p>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" width="200"> </el-table-column>
            <el-table-column prop="describe" label="描述" width="220"> </el-table-column>
            <el-table-column prop="categoryName" label="分类" width="120">
              <template #default="scope">
                <el-tag type="primise">{{ scope.row.categoryName }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="labelName" label="标签" width="120">
              <template #default="scope">
                <el-tag>{{ scope.row.labelName }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="cover" label="封面" width="200">
              <template #default="scope">
                <div class="image-box">
                  <img :src="scope.row.cover" alt="">
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tooltip class="box-item" effect="dark" content="公开" placement="top">
                  <i v-if="scope.row.status === 1" class="iconfont icon-kejian icon-status"></i>
                </el-tooltip>
                <el-tooltip class="box-item" effect="dark" content="隐藏" placement="top">
                  <i v-if="scope.row.status === 2" class="iconfont icon-bukejian icon-status"></i>
                </el-tooltip>
                <el-tooltip class="box-item" effect="dark" content="草稿" placement="top">
                  <i v-if="scope.row.status === 3" class="iconfont icon-caogao icon-status"></i>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column sortable prop="hot" label="热度" width="100">
              <template #default="scope">
                <el-text style="margin-right: 30px;" class="mx-1" type="danger">{{ scope.row.hot }}</el-text></template>
            </el-table-column>
            <el-table-column sortable prop="sort" label="排序" width="100"> </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
            <el-table-column prop="updateTime" label="修改时间" width="180"></el-table-column>
            <el-table-column fixed="right" label="操作" min-width="180">
              <template #default="scope">
                <div class="btn-box">
                  <el-button class="btn" link type="success" size="small" @click="update(scope.row.id)">
                    <i class="iconfont icon-xiugai op-icon"></i>
                    修改
                  </el-button>
                  <el-button v-permissionDirective v-if="scope.row.status === 1" class="btn" link type="info"
                    size="small" @click="updateStatus(scope.row.id, null)">
                    <i class="iconfont icon-bukejian op-icon"> </i>
                    隐藏
                  </el-button>
                  <el-button v-permissionDirective v-if="scope.row.status === 2 || scope.row.status == 3" class="btn"
                    link type="info" size="small" @click="updateStatus(scope.row.id, 1)">
                    <i class="iconfont icon-kejian op-icon"> </i>
                    公开
                  </el-button>
                  <el-button v-permissionDirective class="btn" link type="danger" size="small"
                    @click="onDelArticle(scope.row.id)">
                    <i class="iconfont icon-shanchu op-icon"></i>
                    删除</el-button>
                </div>
              </template>
            </el-table-column>
            <!-- 空状态 -->
            <template v-slot:empty>
              <el-empty description=" 暂无数据" />
            </template>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="公开" name="1">
          <!-- 表格区域 -->
          <el-table height="476px" :data="tableData" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }">
            <el-table-column fixed label="序号" prop="id" width="70">
              <template #default="scope">
                <el-tooltip class="box-item" effect="dark" :content="scope.row.id" placement="top">
                  <p>{{ scope.row.id.toString().slice(-3) }}</p>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" width="200"> </el-table-column>
            <el-table-column prop="describe" label="描述" width="220"> </el-table-column>
            <el-table-column prop="categoryName" label="分类" width="120">
              <template #default="scope">
                <el-tag type="primise">{{ scope.row.categoryName }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="labelName" label="标签" width="120">
              <template #default="scope">
                <el-tag>{{ scope.row.labelName }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="cover" label="封面" width="200">
              <template #default="scope">
                <div class="image-box">
                  <img :src="scope.row.cover" alt="">
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template #default>
                <el-tooltip class="box-item" effect="dark" content="公开" placement="top">
                  <i class="iconfont icon-kejian icon-status"></i>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column sortable prop="hot" label="热度" width="100">
              <template #default="scope">
                <el-text style="margin-right: 30px;" class="mx-1" type="danger">{{ scope.row.hot }}</el-text></template>
            </el-table-column>
            <el-table-column sortable prop="sort" label="排序" width="100"> </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
            <el-table-column prop="updateTime" label="修改时间" width="180"></el-table-column>
            <el-table-column fixed="right" label="操作" min-width="180">
              <template #default="scope">
                <div class="btn-box">
                  <el-button class="btn" link type="success" size="small" @click="update(scope.row.id)">
                    <i class="iconfont icon-xiugai op-icon"></i>
                    修改
                  </el-button>
                  <el-button v-permissionDirective class="btn" link type="info" size="small"
                    @click="updateStatus(scope.row.id, null)">
                    <i class="iconfont icon-bukejian op-icon"> </i>
                    隐藏
                  </el-button>
                  <el-button v-permissionDirective class="btn" link type="danger" size="small"
                    @click="onDelArticle(scope.row.id)">
                    <i class="iconfont icon-shanchu op-icon"></i>
                    删除</el-button>
                </div>
              </template>
            </el-table-column>
            <!-- 空状态 -->
            <template v-slot:empty>
              <el-empty description=" 暂无数据" />
            </template>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="隐藏" name="2">
          <!-- 预览 -->
          <!-- <MdPreview v-model="resultMd"></MdPreview> -->
          <!-- 表格区域 -->
          <el-table height="476px" :data="tableData" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }">
            <el-table-column fixed label="序号" prop="id" width="70">
              <template #default="scope">
                <el-tooltip class="box-item" effect="dark" :content="scope.row.id" placement="top">
                  <p>{{ scope.row.id.toString().slice(-3) }}</p>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" width="200"> </el-table-column>
            <el-table-column prop="describe" label="描述" width="220"> </el-table-column>
            <el-table-column prop="categoryName" label="分类" width="120">
              <template #default="scope">
                <el-tag type="primise">{{ scope.row.categoryName }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="labelName" label="标签" width="120">
              <template #default="scope">
                <el-tag>{{ scope.row.labelName }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="cover" label="封面" width="200">
              <template #default="scope">
                <div class="image-box">
                  <img :src="scope.row.cover" alt="">
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template #default>
                <el-tooltip class="box-item" effect="dark" content="隐藏" placement="top">
                  <i class="iconfont icon-bukejian icon-status"></i>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column sortable prop="hot" label="热度" width="100">
              <template #default="scope">
                <el-text style="margin-right: 30px;" class="mx-1" type="danger">{{ scope.row.hot }}</el-text></template>
            </el-table-column>
            <el-table-column sortable prop="sort" label="排序" width="100"> </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
            <el-table-column prop="updateTime" label="修改时间" width="180"></el-table-column>
            <el-table-column fixed="right" label="操作" min-width="180">
              <template #default="scope">
                <div class="btn-box">
                  <el-button class="btn" link type="success" size="small" @click="update(scope.row.id)">
                    <i class="iconfont icon-xiugai op-icon"></i>
                    修改
                  </el-button>
                  <el-button v-permissionDirective class="btn" link type="info" size="small"
                    @click="updateStatus(scope.row.id, 1)">
                    <i class="iconfont icon-kejian op-icon"> </i>
                    公开
                  </el-button>
                  <el-button v-permissionDirective class="btn" link type="danger" size="small"
                    @click="onDelArticle(scope.row.id)">
                    <i class="iconfont icon-shanchu op-icon"></i>
                    删除</el-button>
                </div>
              </template>
            </el-table-column>
            <!-- 空状态 -->
            <template v-slot:empty>
              <el-empty description=" 暂无数据" />
            </template>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="草稿" name="3">
          <!-- 表格区域 -->
          <el-table height="476px" :data="tableData" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }">
            <el-table-column fixed label="序号" prop="id" width="70">
              <template #default="scope">
                <el-tooltip class="box-item" effect="dark" :content="scope.row.id" placement="top">
                  <p>{{ scope.row.id.toString().slice(-3) }}</p>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" width="200"> </el-table-column>
            <el-table-column prop="describe" label="描述" width="220"> </el-table-column>
            <el-table-column prop="categoryName" label="分类" width="120">
              <template #default="scope">
                <el-tag type="primise">{{ scope.row.categoryName }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="labelName" label="标签" width="120">
              <template #default="scope">
                <el-tag>{{ scope.row.labelName }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="cover" label="封面" width="200">
              <template #default="scope">
                <div class="image-box">
                  <img :src="scope.row.cover" alt="">
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template #default>
                <el-tooltip class="box-item" effect="dark" content="草稿" placement="top">
                  <i class="iconfont icon-caogao icon-status"></i>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column sortable prop="hot" label="热度" width="100">
              <template #default="scope">
                <el-text style="margin-right: 30px;" class="mx-1" type="danger">{{ scope.row.hot }}</el-text></template>
            </el-table-column>
            <el-table-column sortable prop="sort" label="排序" width="100"> </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
            <el-table-column prop="updateTime" label="修改时间" width="180"></el-table-column>
            <el-table-column fixed="right" label="操作" min-width="180">
              <template #default="scope">
                <div class="btn-box">
                  <el-button class="btn" link type="success" size="small" @click="update(scope.row.id)">
                    <i class="iconfont icon-xiugai op-icon"></i>
                    修改
                  </el-button>
                  <el-button v-permissionDirective class="btn" link type="info" size="small"
                    @click="updateStatus(scope.row.id, 1)">
                    <i class="iconfont icon-kejian op-icon"> </i>
                    公开
                  </el-button>
                  <el-button v-permissionDirective class="btn" link type="danger" size="small"
                    @click="onDelArticle(scope.row.id)">
                    <i class="iconfont icon-shanchu op-icon"></i>
                    删除</el-button>
                </div>
              </template>
            </el-table-column>
            <!-- 空状态 -->
            <template v-slot:empty>
              <el-empty description=" 暂无数据" />
            </template>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<style lang="scss" scoped>
.label {
  width: 1325px;
  background-color: #fff;
  border: none;
  height: 675px;
  border-radius: 6px;

  .card {
    display: flex;
  }

  .image-box {
    width: 200px;
    height: 90px;

    img {
      width: 200px;
      height: 90px;
      object-fit: cover;
    }
  }

  .btn-box {
    display: flex;

    .btn {
      width: 43px;

      .op-icon {
        margin: 1px;
      }
    }
  }

  .icon-status {
    font-size: 20px;
    margin-right: 27px;
  }
}
</style>
